<template>
  <div class="add-member">
    <div class="main">
      <div class="list-herder">
        <el-page-header @back="goBack" :content="title"> </el-page-header>
      </div>
      <el-form
        ref="form"
        :model="Form"
        label-width="80px"
        label-position="top"
        inline
      >
        <el-form-item label="姓名">
          <el-input v-model="Form.memberName"></el-input>
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="Form.companyName"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="Form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="Form.email"></el-input>
        </el-form-item>
      </el-form>
      <can_save @saveData="saveData" @cancelData="cancelData"></can_save>
    </div>
  </div>
</template>
<script>
import can_save from "../../components/components_wxq/can_save.vue";
import storage from "../../utils/storage";
import { addMember, amendMember } from "../../utils/api/marke";

export default {
  name: "addGroupPage",
  components: {
    can_save,
  },
  data() {
    return {
      title: "新增群组成员",
      Form: {
        companyName: "",
        groupId: null,
        email: "",
        id: null,
        memberName: "",
        phone: "",
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    cancelData() {
      this.$router.push("/home/market/member");
    },
    saveData() {
      if (this.Form.id) {
        addMember(this.Form).then((data) => {
          console.log(data);
        });
      }

      this.$router.go(-1);
    },
    //刷新缓存
    breakPage(e) {
      // storage.setStorage("title", this.title);
      storage.setStorage("Form", this.Form);
    },
  },
  computed: {},
  watch: {},
  created() {
    window.addEventListener("beforeunload", (e) => this.breakPage(e));
    this.Form.groupId = this.$route.params.id || sessionStorage.getItem("id");
    // this.title = this.$route.params.H || sessionStorage.getItem("title");
    let form = storage.getStorage("Form") || this.$route.params.content;
    this.Form = form || this.Form;
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", (e) => this.breakPage(e));
    // storage.removeStorage("title");
    storage.removeStorage("Form");
  },
};
</script>
<style lang="less" scoped>
.add-member {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;

  .main {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    border-top: 4px solid #4091ff;
    border-bottom: 2px solid #ccc;
    border-radius: 8px 8px 0 0;
  }
  .list-herder {
    padding: 0 20px 10px;
  }
}
.el-form {
  width: 100%;
  padding: 20px 20px 10px;
  box-sizing: border-box;
  .el-form-item {
    width: 50%;
    margin-right: 0;
    padding: 0 12px;
    box-sizing: border-box;
    vertical-align: none;
  }
  .el-select {
    width: 100%;
  }
  .el-form-item /deep/ .el-input {
    width: 100% !important;
    height: 36px !important;
  }
}
</style>
